import React, { Component, forwardRef, PureComponent } from 'react'
import { connect } from '@umijs/max'
import styles from './index.less'

class ViewDetail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      spreadSta: false,
    }
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  toggleViewDetail = (spreadStaParams = undefined) => {
    this.setState((prevState) => ({
      spreadSta: spreadStaParams !== undefined ? spreadStaParams : !prevState.spreadSta,
    }))
  };

  returnComp = () => {
    const { taskDetail } = this.props
    const tempComp = (
      <ul className={styles.node_detail_list}>
        <li className={styles.item}>
          <div className={styles.item_column}>任务名称</div>
          <div className={styles.item_cont}>{taskDetail && taskDetail.name || '-'}</div>
        </li>
        <li className={styles.item}>
          <div className={styles.item_column}>责任人</div>
          <div className={styles.item_cont}>{taskDetail && taskDetail.username || '-'}</div>
        </li>
        <li className={styles.item}>
          <div className={styles.item_column}>创建时间</div>
          <div className={styles.item_cont}>{taskDetail && taskDetail.createTime || '-'}</div>
        </li>
        <li className={styles.item}>
          <div className={styles.item_column}>最近修改时间</div>
          <div className={styles.item_cont}>{taskDetail && taskDetail.updateTime || '-'}</div>
        </li>
        <li className={styles.item}>
          <div className={styles.item_column}>描述</div>
          <div className={styles.item_cont}>{taskDetail && taskDetail.remark || '-'}</div>
        </li>
      </ul>
    )

    return tempComp
  }

  render() {
    const {
      spreadSta,
    } = this.state
    return (
      <div className={`${styles.node_detail} ${spreadSta ? styles.spread : ''}`}>
        <div className={styles.node_detail_column}>任务详情</div>
        {
          this.returnComp()
        }
      </div>
    )
  }
}

class WrappedComponentRef extends Component {
  render() {
    const { forwardedRef, ...rest } = this.props
    return (
      <ViewDetail ref={forwardedRef} {...rest} />
    )
  }
}

const IComponent = connect(({ realTimeScriptDev }) => ({ ...realTimeScriptDev }))(WrappedComponentRef)

export default forwardRef((props, ref) => <IComponent {...props} forwardedRef={ref} />)
